<template>
    <div class="upload-container">
        <el-button :style="{ background: color, borderColor: color }" icon="el-icon-upload" size="mini" type="primary" @click="dialogVisible = true">上传</el-button>
        <el-dialog :visible.sync="dialogVisible">
            <el-upload :multiple="true" :file-list="fileList" :show-file-list="true" :on-remove="handleRemove" :before-upload="beforeUpload" class="editor-slide-upload" action :http-request="formUploadFile" list-type="picture-card">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </el-dialog>
    </div>
</template>

<script>
// import { PruniversalityIMGUpload } from '@/api/FilePro'

export default {
    name: "EditorSlideUpload",
    props: {
        color: {
            type: String,
            default: "#1890ff",
        },
    },
    data() {
        return {
            dialogVisible: false,
            listObj: {},
            fileList: [],
            currentUid: [],
        };
    },
    methods: {
        checkAllSuccess() {
            return Object.keys(this.listObj).every((item) => this.listObj[item].hasSuccess);
        },
        handleSubmit() {
            const arr = Object.keys(this.listObj).map((v) => this.listObj[v]);
            this.$emit("successCBK", arr);
            this.listObj = {};
            this.fileList = [];
            // this.tempArray=[]
            this.dialogVisible = false;
        },
        handleRemove(file) {
            const uid = file.uid;
            const objKeyArr = Object.keys(this.listObj);
            for (let i = 0, len = objKeyArr.length; i < len; i++) {
                if (this.listObj[objKeyArr[i]].uid === uid) {
                    delete this.listObj[objKeyArr[i]];
                    return;
                }
            }
        },
        beforeUpload(file) {
            // this.tempArray.push({ uid: file.uid, name: file.name })
            if (this.currentUid.length === 0) {
                this.currentUid.push({ uid: file.uid, name: file.name });
            } else {
                let skip = true;
                this.currentUid.forEach((ele) => {
                    if (ele.name === file.name) {
                        skip = false;
                        // this.currentUid.push({ uid: file.uid, name: file.name });
                    }
                });
                if (skip) {
                    this.currentUid.push({ uid: file.uid, name: file.name });
                }
            }

            // // console.log(this.currentUid);
            // // console.log(this.tempArray)
            const _self = this;
            const _URL = window.URL || window.webkitURL;
            const fileName = file.uid;
            this.listObj[fileName] = {};
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = _URL.createObjectURL(file);
                img.onload = function() {
                    _self.listObj[fileName] = {
                        hasSuccess: false,
                        uid: file.uid,
                        width: this.width,
                        height: this.height,
                    };
                };
                resolve(true);
            });
        },
        formUploadFile(fileObj) {
            const formData = new FormData();
            formData.append("image", fileObj.file);
            formData.append("name", "richtext");
            // const loading = this.$loading({
            //   lock: true,
            //   text: '上传中',
            //   spinner: 'el-icon-loading',
            //   background: 'rgba(0, 0, 0, 0.7)'
            // });
            PruniversalityIMGUpload(formData).then((response) => {
                if (!response.isSuccess) {
                    this.$message({
                        type: "error",
                        message: "上传失败!",
                    });
                    return;
                }
                const objKeyArr = Object.keys(this.listObj);
                for (let j = 0; j < this.currentUid.length; j++) {
                    for (let i = 0, len = objKeyArr.length; i < len; i++) {
                        if (this.listObj[objKeyArr[i]].uid === this.currentUid[j].uid) {
                            this.listObj[objKeyArr[i]].url = this.serverURL + response.data;
                            this.currentUid.splice(j, 1);
                            // loading.close();
                            return;
                        }
                    }
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.editor-slide-upload {
    margin-bottom: 20px;
    .el-upload--picture-card {
        width: 100%;
    }
}
</style>
